<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>双大括号表达式</h2>
        <p>{{msg}}</p>
        <p>{{msg.toUpperCase()}}</p>
        <p v-html="msg1"></p>

        <button @click="test('asc')">click ttt</button>
        <button v-on:click="test1">click test1</button>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const vm = new Vue({

        el: '#app',
        data: {
            msg: 'hello vue',
            msg1: "<a href=''>button</a>"
        },
        methods:{
            test(data) {
                alert(data);
            },

            test1() {
                alert('test1');
            }
        },

    });


    /*
    * tips: 模板语法
    * 双大括号表达式{{}}
    * 强制数据绑定 html属性绑定data 方式1:v-bind:href="" 方式2: :href=""
    * 绑定事件监听 html事件绑定methods 方式1: v-on:click="test" 方式2: @click="test"
    * 其他指令 v-html v-text .. 可以绑定一些特性的html data
    * 注意点: : + @  |  methods
    *
    * */


</script>
</html>